// 我的订单
import React, { useState } from 'react'
import { NavBar, Tabs } from 'react-vant'
import { Search } from '@react-vant/icons'
import { useNavigate, useParams } from 'react-router-dom'

// 模拟订单数据
const mockOrders = [
  { id: 1, status: 'all' },
  { id: 2, status: 'to-pay' },
  { id: 3, status: 'to-ship' },
  { id: 4, status: 'to-receive' },
  { id: 5, status: 'success' },
];

export default function MyOrder() {
  const navigate = useNavigate()
  const { status } = useParams()
  const [activeTab, setActiveTab] = useState(status || 'all')

  const handleLeftClick = () => {
    navigate(-1)
  }

  const handlerightClick = () => {
    alert('搜索功能暂未开放')
  }

  // 根据当前激活的标签过滤订单数据
  const getFilteredOrders = () => {
    if (activeTab === 'all') {
      return mockOrders;
    }
    return mockOrders.filter(order => order.status === activeTab);
  };

  return (
    <>
      <div>
        <NavBar
          title='我的订单'
          leftText='返回'
          onClickLeft={handleLeftClick}
          rightText={<Search fontSize={20} onClick={handlerightClick} />}
        />
      </div>
      <div>
        <Tabs active={activeTab} onChange={setActiveTab}>
          <Tabs.TabPane name={"all"} title="全部">
            {getFilteredOrders().map(order => (
              <div key={order.id}>订单 ID: {order.id}</div>
            ))}
          </Tabs.TabPane>
          <Tabs.TabPane name={"to-pay"} title="待付款">
            {getFilteredOrders().map(order => (
              <div key={order.id}>订单 ID: {order.id}</div>
            ))}
          </Tabs.TabPane>
          <Tabs.TabPane name={"to-ship"} title="待发货">
            {getFilteredOrders().map(order => (
              <div key={order.id}>订单 ID: {order.id}</div>
            ))}
          </Tabs.TabPane>
          <Tabs.TabPane name={"to-receive"} title="待收货">
            {getFilteredOrders().map(order => (
              <div key={order.id}>订单 ID: {order.id}</div>
            ))}
          </Tabs.TabPane>
          <Tabs.TabPane name={"success"} title="交易成功">交易成功</Tabs.TabPane>
        </Tabs>
      </div>
    </>
  )
}